Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

Loops in Javascript

In this article, we shall look into different types of loops available in javascript. Loops are used to iterate over the elements in an array or the object.

We can classify the loops as below

for loop
for-of loop
for-in loop
while loop
do-while loop

For iterating in an array we can use for, for-of, while and do-while. To iterate through the properties of an object we use for-in loop.

1) for loop

The for loops are use to iterate through the elements in an array or a collection. It has the following syntax as mentioned below.

for(Intialization; Condition; Increment/Decrement) {
   // logic to be executed.
}

Intialization - It is used to initialize any variable with a value. It is run only onces during the start of the loop.

Condition - It will contain a condition. It will check the condition for every iteration and will allow inside the loop only if the condition is satisfied.

Increment/Decrement- This will either increment or decrement the value of the variable for every iteration.

Example for 'for' loop:

If we want to add a new employee to the list then we can use

    const developers = ["Developer 1", "Developer 2", "Developer 3", "Developer 4"];

// For loop
for (let i = 0; i < developers.length; i++) {
  console.log(developers[i]);
}
  
  

Output

Developer 1
Developer 2
Developer 3
Developer 4

2) for-of loop

The for-of loop allows us to loop through the values of an iterable object. It may be an array or a string or maps etc.

Syntax

for (variable of iterable) {
  // logic to be executed.
}

Example for 'for-of' loop:

    const developers = ["Developer 1", "Developer 2", "Developer 3", "Developer 4"];
for (let developer of developers) {
  console.log(developer);
}
  
  

Output:

Developer 1
Developer 2
Developer 3
Developer 4

In the above example, when looping through the 'developers' array using for-in loop. Each time it returns the value to the 'developer' variable.

3) for-in loop

The for-in loop is used to iterate through the properties of an object.

Syntax:

for (variable of iterable) {
  // logic to be executed.
}

Example for 'for-in' loop:

    const employee = { name: "John", designation: "Senior Developer" };
for (let prop in employee) {
  console.log(`Key:${prop} Value:${employee[prop]}`);
}
    
  

Output:

Key:name Value:John
Key:designation Value:Senior Developer

In the above example, we have an object with two properties 'name' and 'designation'. Now, using the for-in loop we iterated through each properties of the object.

4) while loop

The while loop will be executing the block of codes repeatedly until a particular condition is satisfied.

Syntax:

  while(condition){
    // code to be executed.
  }

Example for 'while' loop:

    const developers = ["Developer 1", "Developer 2", "Developer 3", "Developer 4"];
let i = 0;
while (i < developers.length) {
  console.log(developers[i]);
  i++;
}
    
  

Output:

Developer 1
Developer 2
Developer 3
Developer 4

5) do-while loop

The do-while loop will be executing atleast once even if the condition is false initially. The condition will be checked only after the block of code is executed intially.

Syntax

  do {
    // block of code.
  }while(condition);

Example 1 for 'do-while' loop:

  const developers = ["Developer 1", "Developer 2", "Developer 3", "Developer 4"];
let i = 0;
do {
  console.log(developers[i]);
  i++;
} while (i < developers.length);
  

Output:

Developer 1
Developer 2
Developer 3
Developer 4

In the above example, initially the code inside the do-while loop is initially executed and later on the condition will be checked. In this scenario this will produce the output exactly like a while loop. Let's see another example.

Example 2 for 'do-while' loop:

  let i = 5;
do {
  console.log("Inside do-while loop");
  i++;
} while (i < 5);
  

Output:

Inside do-while loop

In the above code, even when the condition is not satisfied initially, the block of code inside the do-while loop will be executed initially. Then later on when checking the condition, it fails to satisfy the condition, so it will exit the loop.

Loops in Javascript

Categories

Most Read